<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用学习帮APP</title>
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../../../../../css/header.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css" referrerpolicy="no-referrer"/>
    <script src="../../../../../lib/jquery.min.js"></script>
    <script src="../../../../../lib/axios.js"></script>
    <script src="../../../../../lib/vue.js"></script>
    <!-- <script>
        document.addEventListener('visibilitychange',
        function(){
            if(document.visibilityState === "visible"){
                setTimeout(()=>{
                    location.reload()
                }, 1000)
            }
        }
        )
    </script> -->
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">HUAT教务辅助认证</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>
    <section>
        <div class="container">
            <!-- steps步骤条 -->
            <van-steps :active="active" active-color="#fff" :length="3">
                <van-step>身份选择</van-step>
                <van-step>身份验证</van-step>
                <van-step>注册成功</van-step>
            </van-steps>
            <!-- 校徽 -->
            <div class="schoolIcon"></div>
            <!-- form -->
            <ul class="step1_1" v-if="active_child == 0">
                <li class="title">1.&nbsp;选择教师信息</li>
                <li>
                    <span>学院</span>
                    <!-- vant下拉菜单 -->
                    <van-dropdown-menu>
                        <van-dropdown-item v-model="select_dept" :options="option_dept" />
                    </van-dropdown-menu>
                    <!-- <select name="dept" id="">
                        <option value="105000">经济管理学院</option>
                    </select> -->
                </li>
                <li>
                    <span>姓名</span>
                    <input type="text" name="teacherName" id="" class="name" placeholder="姓名" v-model="name" @input="input()">
                </li>
                <li class="btns">
                    <!-- vant button按钮 -->
                    <van-button v-if="!isBtnShow1" type="primary" disabled block color="#fff" round>下一步</van-button>
                    <van-button v-if="isBtnShow1" type="primary" block color="#fff" round @click="next()">下一步</van-button>
                </li>
            </ul>
            <ul class="step1_2" v-if="active_child == 1">
                <li class="title">1.&nbsp;选择教师信息</li>
                <li class="decs">选择要验证的账户</li>
                <li v-for="(item, index) of searchResult" :class="selectResult == item.huat_id ? 'teacherInfo active' : 'teacherInfo'" @click="selectInfo(item.huat_id)" :key="index">
                    <div class="left">
                        <div class="dept">
                            <span>院系:&nbsp;</span>
                            <span>{{item.dept}}</span>
                        </div>
                        <div class="id">
                            <span>工号:&nbsp;</span>
                            <span>{{item.teacherID}}</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="select" v-show="selectResult == item.huat_id"></div>
                        <span class="name">{{item.teacherName}}</span>
                    </div>
                </li>
                <li class="btns">
                    <!-- vant button按钮 -->
                    <van-button v-if="selectResult == ''" type="primary" disabled block color="#fff" round>下一步</van-button>
                    <van-button v-if="selectResult != ''" type="primary" block color="#fff" round @click="next()">下一步</van-button>
                </li>
                <!-- 多个可用手机号的情况 -->
                <van-action-sheet v-model="show" :actions="actions" cancel-text="取消" title="请选择手机号"  @select="onSelect" />
            </ul>
            <!-- step2 -->
            <ul class="step2_1" v-if="active_child == 2">
                <li class="title">2.&nbsp;教师信息验证</li>
                <li class="decs">请补全手机号码</li>
                <li class="phone">
                    <span>{{phone.slice(0, 1)}}</span>
                    <span>{{phone.slice(1, 2)}}</span>
                    <span>{{phone.slice(2, 3)}}</span>
                    <div class="input">
                        <!-- 密码输入框 -->
                        <van-password-input
                        :value="value"
                        :focused="showKeyboard"
                        @focus="showKeyboard = true"
                        :length="4"
                        :mask="false"
                        />
                    </div>
                    <span>{{phone.slice(7, 8)}}</span>
                    <span>{{phone.slice(8, 9)}}</span>
                    <span>{{phone.slice(9, 10)}}</span>
                    <span>{{phone.slice(10, 11)}}</span>

                    <!-- 数字键盘 -->
                    <van-number-keyboard
                    :show="showKeyboard"
                    @input="onInput"
                    @delete="onDelete"
                    @blur="showKeyboard = false"
                    />
                </li>
            </ul>
            <ul class="step2_2" v-if="active_child == 3">
                <li class="title">2.&nbsp;教师信息验证</li>
                <li class="decs">
                    请输入短信验证码
                    <div>
                        <van-loading v-if="!send" size=".4348rem" type="circular" color="#fff" >发送中...</van-loading>
                        <span v-if="send" class="sendSuccess">已向{{phone}}发送验证码</span>
                    </div>
                </li>
                <li class="phone">
                    <div class="input">
                        <!-- 验证码输入框 -->
                        <van-password-input
                        :value="value2"
                        :focused="showKeyboard2"
                        @focus="switch_showKeyboard2()"
                        :length="6"
                        :mask="false"
                        />
                    </div>
                    <!-- 数字键盘 -->
                    <van-number-keyboard
                    :show="showKeyboard2"
                    @input="onInput2"
                    @delete="onDelete2"
                    @blur="showKeyboard2 = false"
                    />
                </li>
            </ul>
            
        </div>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js" referrerpolicy="no-referrer"></script>
    <script src="./js/main.js"></script>
    <script>
        function resetHtmlFont(){
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        resetHtmlFont();
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>